<template>
  <div class="common">
    <div class="old-content">
      <Input
        v-model="oldContent"
        type="textarea"
        style="width: 100%; height: 100%"
        :autosize="{ minRows: 22, maxRows: 22 }"
        :placeholder="oldPlaceholder"
      />
    </div>
    <div class="new-content" v-html="newContent">
    </div>
    <div class="floor">
      <Select
        v-model="selectEnc2DecType"
        v-if="isShowEnc2Dec"
        style="width: 150px"
      >
        <Option value="1">加/解密方式1</Option>
        <Option value="2">加/解密方式2</Option>
      </Select>
      &nbsp;&nbsp;&nbsp;
      <Button @click="doReset"> 置空 </Button>
      &nbsp;&nbsp;&nbsp;
      <Button type="primary" :loading="loading" @click="doHandle">
        <span v-if="!loading">开始处理</span>
        <span v-else>处理中...</span>
      </Button>
      &nbsp;&nbsp;&nbsp;
      <Button type="info" @click="doCopy"> 复制 </Button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      oldContent: "",
      newContent: "",
      loading: false,
      selectEnc2DecType: "2", // 默认选中加/解密方式2
      isShowEnc2Dec: false, // 用于标记加解密
    };
  },
  props: ["toHandleUrl", "oldPlaceholder"],
  created() {
    this.initShowEnc2Dec();
  },
  methods: {
    doReset() {
      this.oldContent = "";
    },
    doHandle() {
      this.loading = true;
      this.AXIOS.post(this.toHandleUrl, {
        type: this.selectEnc2DecType,
        data: this.oldContent,
      })
        .then((resp) => {
          console.log(resp);
          // 先清理下缓存
          this.newContent = "";
          if (resp.data.code === 0) {
            this.newContent = resp.data.msg;
          } else {
            this.$Message.error(resp.data.msg);
          }
        })
        .catch((err) => {
          this.$Message.error(err);
        });

      // 取消 loading
      this.loading = false;
    },
    doCopy() {
      let tag = document.createElement("textarea");
      tag.setAttribute("id", "cp_hgz_textarea");
      tag.value = document.getElementsByClassName("new-content")[0].textContent;
      document.getElementsByTagName("body")[0].appendChild(tag);
      document.getElementById("cp_hgz_textarea").select();
      document.execCommand("copy");
      document.getElementById("cp_hgz_textarea").remove();
      this.$Message.info("复制成功");
    },
    initShowEnc2Dec() {
      // 只有加/解密的时候才显示
      if (
        this.toHandleUrl.indexOf("dec") > -1 ||
        this.toHandleUrl.indexOf("enc") > -1
      ) {
        this.isShowEnc2Dec = true;
      } else {
        this.isShowEnc2Dec = false;
      }
    },
  },
};
</script>

<style scoped>
.common {
  position: relative;
  height: 100%;
}
.old-content,
.new-content {
  width: 46%;
  height: 473px;
  /* border: 1px solid red; */
}

.old-content {
  float: left;
}

.new-content {
  float: right;
  border-radius: 4px;
  text-align: left;
  padding: 5px 5px;
  white-space: pre-wrap;
  border: 1px solid rgb(230, 224, 224);
}

.floor {
  position: absolute;
  bottom: 0px;
  /* border: 1px solid red; */
  clear: both;
  height: 50px;
  line-height: 50px;
  width: 100%;
  text-align: center;
}
</style>